<template>
  <el-dialog
    title="过审播放链接"
    :visible="show"
    width="400px"
    :append-to-body="true"
    @close="close"
  >
    <div class="changeVideoUrl">
      <el-form
        ref="changeVideoUrl"
        label-position="top"
        :model="ruleForm"
        :rules="rules"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="选择过审播放链接"
          prop="mini_app_id"
        >
          <el-select
            v-model="ruleForm.mini_app_id"
            placeholder="请选择小程序"
            style="width:100%;"
            clearable
          >
            <el-option
              v-for="(item,index) in miniList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <svg-icon
                v-if="item.app_type==1"
                style="float: right;"
                icon-class="miniapp"
                class="imageIcon"
              />
              <svg-icon
                v-else
                style="float: right;"
                icon-class="douyin"
                class="imageIcon"
              />
            </el-option>
          </el-select>
        </el-form-item>
        <p class="textInfo">一部合同剧在多个小程序审核通过后，会有多个小程序过审播放链接，支持设置使用指定小程序过审播放链接</p>
        <p
          class="textInfo"
          style="color:#F31A1A;"
        >如首次过审，取首次过审播放链接；如历史存在多次过审记录，若设置过播放链接，则保留不变，未设置播放链接，取最近一次小程序过审播放链接</p>
      </el-form>
      <div
        slot="footer"
        class="btn"
      >
        <el-button @click="close">取 消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          @click="submit"
        >确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { setPlayLink, checkedMiniApp } from '@/api/content'
export default {
  props: {
    rowInfo: {
      require: true,
      type: Object
    },
    show: {
      require: true,
      type: Boolean
    }
  },
  data() {
    return {
      ruleForm: {
        mini_app_id: ''
      },
      loading: false,
      miniList: [],
      rules: {
        mini_app_id: [{ required: true, message: '请选择小程序', trigger: 'change' }]
      }
    }
  },
  created() {
    if (this.rowInfo.link_mini_app_id && this.rowInfo.link_mini_app_id != '0') {
      this.ruleForm.mini_app_id = this.rowInfo.link_mini_app_id
    } else {
      this.ruleForm.mini_app_id = ''
    }
  },
  mounted() {
    this.checkedMiniApp()
  },
  methods: {
    async checkedMiniApp() {
      const res = await checkedMiniApp({ playlet_id: this.rowInfo.id })
      if (res.data.length > 0) {
        this.miniList = res.data
      } else {
        this.miniLis = []
        this.ruleForm.mini_app_id = ''
      }
    },
    close() {
      this.$emit('update:show', false)
    },
    async setPlayLink() {
      const checkItem = this.miniList.find((item) => item.id == this.ruleForm.mini_app_id)
      try {
        const res = await setPlayLink({ playlet_id: this.rowInfo.id, mini_app_id: this.ruleForm.mini_app_id, app_type: checkItem.app_type })
        this.loading = false
        if (res.status_code == 1) {
          this.$message.success(res.msg)
          this.close()
          this.$emit('ok')
        }
      } catch (error) {
        this.loading = false
      }
    },
    submit() {
      this.$refs.changeVideoUrl.validate((valid) => {
        if (valid) {
          this.loading = true
          this.setPlayLink()
        } else {
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.changeVideoUrl {
  ::v-deep .el-form-item__label {
    font-weight: 600;
  }
  .btn {
    float: right;
    margin-top: 20px;
  }
}
</style>